import React, { useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import getStackBarChart from '@/utils/echarts_config/getStackBarChart';
import getDoughnut from '@/utils/echarts_config/getDoughnut';
import getNestedPies from '@/utils/echarts_config/getNestedPies';
import getRosPie from '@/utils/echarts_config/getRosPie';
import getMultipleGauge from '@/utils/echarts_config/getMultipleGauge';
import getBubbleChart from '@/utils/echarts_config/getBubbleChart';
import getRadarChart from '@/utils/echarts_config/getRadarChart';
import getFunnelChart from '@/utils/echarts_config/getFunnelChart';
import getWaterContent from '@/utils/echarts_config/getWaterContent';
import getAreaChart from '@/utils/echarts_config/getAreaChart';
import getStackLine from '@/utils/echarts_config/getStackLine';
import getBasicRelation from '@/utils/echarts_config/getBasicRelation';
import {
  getBarChart,
  getLineChart,
  getPieChart,
  getVisualMap,
  getGauge,
  getProgress6
} from '@/utils/echarts';
import {
  DOM_TYPE_BAR,
  DOM_TYPE_LINE,
  DOM_TYPE_PIE,
  DOM_TYPE_VIS,
  DOM_TYPE_GAUGE,
  DOM_TYPE_PRO6,
  DOM_TYPE_STACK_BAR,
  DOM_TYPE_DOUGHNUT,
  DOM_TYPE_NEST_PIE,
  DOM_TYPE_ROS_PIE,
  DOM_TYPE_MULTIPLE_GAUGE,
  DOM_TYPE_BUBBLE,
  DOM_TYPE_RADAR,
  DOM_TYPE_FUNNEL,
  DOM_TYPE_WATER_CONTENT,
  DOM_TYPE_AREA,
  DOM_TYPE_STACK_LINE,
  DOM_TYPE_BASCI_RELATION
} from '@/utils/const';
import TypeProgress from '@/components/TypeProgress';
import { connect } from 'react-redux';
import { actions as gridActions } from '@/redux/grid';
import { Button } from 'antd';
import _ from 'lodash';
import { exportExcel } from 'xlsx-oc';

const types = {
  [DOM_TYPE_BAR]: getBarChart,
  [DOM_TYPE_LINE]: getLineChart,
  [DOM_TYPE_PIE]: getPieChart,
  [DOM_TYPE_VIS]: getVisualMap,
  [DOM_TYPE_GAUGE]: getGauge,
  [DOM_TYPE_PRO6]: getProgress6,
  [DOM_TYPE_STACK_BAR]: getStackBarChart,
  [DOM_TYPE_DOUGHNUT]: getDoughnut,
  [DOM_TYPE_NEST_PIE]: getNestedPies,
  [DOM_TYPE_ROS_PIE]: getRosPie,
  [DOM_TYPE_MULTIPLE_GAUGE]: getMultipleGauge,
  [DOM_TYPE_BUBBLE]: getBubbleChart,
  [DOM_TYPE_RADAR]: getRadarChart,
  [DOM_TYPE_FUNNEL]: getFunnelChart,
  [DOM_TYPE_WATER_CONTENT]: getWaterContent,
  [DOM_TYPE_AREA]: getAreaChart,
  [DOM_TYPE_STACK_LINE]: getStackLine,
  [DOM_TYPE_BASCI_RELATION]: getBasicRelation
};

// eslint-disable-next-line complexity
const GridItem = ({ id, currentData, removeLayItem, selectOpenId,exportLayItem,obviousLayout,filterLayout,activeLayId,filterData,_idFilterLayout,filterId }) => {
  const data = currentData[id] || {};
  const [visible, setVisible] = useState(false);
  const [filterdata, datasetVisible] = useState(false);
  const cdsOdbcValue = _.get(data, 'cdsOdbcValue', JSON.stringify(''));
  const optionList = JSON.parse(cdsOdbcValue) || [];
  const option = types[data.cfiType](optionList);
  // eslint-disable-next-line complexity
  const handelData = (data,type) => {
    console.log(data,type);
    const array = [];
    if (type === '2' || type === '1'){
      const numdata = JSON.parse(data.cdsOdbcValue);
      numdata.forEach(element => {
        element.data.forEach(item => {
          array.push({ title: element.label,name: item.key, value: item.value });
        });
      });
    } else if (type === '3'){
      const numdata = JSON.parse(data.cdsOdbcValue);
      numdata.forEach(element => {
        array.push({ title: data.cfiName,name: element.name, value: element.value });
      });
    } else if (type === '5'){
      array.push({ title: data.cfiName,name: data.cfiName,value: data.cdsOdbcValue });
    } else if (type === '6'){
      const numdata = JSON.parse(data.cdsOdbcValue);
      numdata.forEach(element => {
        array.push({ title: data.cfiName,name: element.label, value: element.value });
      });
    } else if (type === '7'){
      const numdata = JSON.parse(data.cdsOdbcValue);
      numdata.forEach(element => {
        array.push({ title: element.label,name: element.totalCount, value: element.damageCount });
      });
    }
    return array;
  };
  const component = data.cfiType === DOM_TYPE_PRO6 ? (
    <TypeProgress type={data.cfiType}
      data={optionList} />
  ) : (<ReactEcharts
    option={option}
    notMerge
    lazyUpdate
    style={{ width: '100%',height: '100%',paddingTop: '30px' }}
  />);
  return (
    <>
      <img className="bg-close" src={require('@/assets/images/temp/bg-close.png')} alt="" onClick={e => {
        e.stopPropagation();
        removeLayItem(id);
      }} />
      <img className="bg-icon" src={require('@/assets/images/temp/1.png')} alt="" />
      <img className="bg-icon" src={require('@/assets/images/temp/1.png')} alt="" />
      <img className="bg-icon" src={require('@/assets/images/temp/1.png')} alt="" />
      <img className="bg-icon" src={require('@/assets/images/temp/1.png')} alt="" />
      <img className="bg-icon" src={require('@/assets/images/temp/2.png')} alt="" />
      <img className="bg-icon" src={require('@/assets/images/temp/2.png')} alt="" />
      { data.cfiType === DOM_TYPE_GAUGE && <img className="bg-eGauge" src={require('@/assets/images/temp/bg-img.png')} alt="" /> }
      <div className="title-box"><span className="scale">{ data.cfiName }</span></div>
      {
        id === activeLayId && <div className="kitBtn">
          {
            currentData[id].cfiEvent.glass === 1 && <span onClick={e => {
              selectOpenId(id);
            }} ><img src={require('@/assets/images/open-btn.png')} title="放大" alt="" /></span>
          }
          {
            currentData[id].cfiEvent.filter === 1 && <span onClick={e => {
              setVisible(!visible);
              const data = handelData(currentData[id].cusDataSource.cdsOdbcValue === undefined ? JSON.parse(currentData[id].cusDataSource.cdsOdbcValue) : currentData[id] , currentData[id].cfiType);
              datasetVisible(JSON.stringify(data) === '[]' ? JSON.parse(currentData[id].cusDataSource.cdsOdbcValue) : data);
            }}><img src={require('@/assets/images/filter-btn.png')} title="过滤" alt="" /></span>
          }
          {
            currentData[id].cfiEvent.export === 1 && <span onClick={e => {
              const _headers = [{ k: 'title', v: '名称' },{ k: 'name', v: '条件' }, { k: 'value', v: '数量' },];
              const data = handelData(currentData[id].cusDataSource.cdsOdbcValue === undefined ? JSON.parse(currentData[id].cusDataSource.cdsOdbcValue) : currentData[id] , currentData[id].cfiType);
              exportExcel(_headers, JSON.stringify(data) === '[]' ? JSON.parse(currentData[id].cusDataSource.cdsOdbcValue) : data);
            }} ><img src={require('@/assets/images/export-btn.png')} title="导出" alt="" /></span>
          }
          {
            currentData[id].cfiEvent.detail === 1 && <span onClick={e => {
              const data = handelData(currentData[id].cusDataSource.cdsOdbcValue === undefined ? JSON.parse(currentData[id].cusDataSource.cdsOdbcValue) : currentData[id] , currentData[id].cfiType);
              obviousLayout(JSON.stringify(data) === '[]' ? JSON.parse(currentData[id].cusDataSource.cdsOdbcValue) : data);
            }} ><img src={require('@/assets/images/obvious-btn.png')} title="明细" alt="" /></span>
          }
        </div>
      }
      {component}
      {
        visible && <div className="filterBox">
          <div>
            <span>过滤条件:</span>
            {
              filterdata ? _.map(filterdata, cId => (<span
                key={cId}
              >
                {cId.name},
              </span>)) : <span className="filterCondition">暂无过滤条件</span>
            }
          </div>
          <Button type="primary" onClick={e => {
            setVisible(false);
          }}>关闭过滤条件</Button>
        </div>
      }
    </>
  );
};

const mapStateToProps = ({ gridState: { currentData,activeLayId,filterData,filterId } }) => {
  // const cdsOdbcValue = _.get(currentData, `${activeLayId}.cdsOdbcValue`, JSON.stringify(''));
  return {
    // optionList: JSON.parse(cdsOdbcValue) || [],
    currentData,
    filterData,
    activeLayId,
    filterId
  };
};

const mapDispatchToProps = dispatch => {
  return {
    removeLayItem: layId => dispatch(gridActions.removeLayItem(layId)),
    selectOpenId: openId => dispatch(gridActions.selectOpenId(openId)),
    exportLayItem: id => dispatch(gridActions.exportLayItem(id)),
    obviousLayout: id => dispatch(gridActions.obviousLayout(id)),
    filterLayout: id => dispatch(gridActions.filterLayout(id)),
    _idFilterLayout: filterData => dispatch(gridActions._idFilterLayout(filterData)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(GridItem);
